import style from './App.module.scss'
import ConversationsList from './components/Conversations/ConversationsList'
import ChatContent from './components/ChatContent/ChatContent'
import SenderInput from './components/SenderInput/SenderInput'
import { useState, useEffect } from 'react'

function App() {
  const [showMobileMenu, setShowMobileMenu] = useState(false)
  const [isMobile, setIsMobile] = useState(false)

  // 检测是否为移动端
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth <= 768)
    }

    checkMobile()
    window.addEventListener('resize', checkMobile)

    return () => {
      window.removeEventListener('resize', checkMobile)
    }
  }, [])

  // 切换移动端菜单
  const toggleMobileMenu = () => {
    setShowMobileMenu(!showMobileMenu)
  }

  return (
    <div className={style.container} data-container>
      {/* 左侧聊天记录 */}
      <div className={`${style.left} ${showMobileMenu ? style.show : ''}`}>
        <ConversationsList
          isMobile={isMobile}
          showMobileMenu={showMobileMenu}
          onToggleMenu={toggleMobileMenu}
        />
      </div>

      {/* 右侧主区域 */}
      <div className={style.right}>
        {/* 输出 */}
        <ChatContent
          isMobile={isMobile}
          onToggleMenu={toggleMobileMenu}
          isMenuOpen={showMobileMenu}
        />

        {/* 输入框 */}
        <SenderInput />
      </div>
    </div>
  )
}

export default App
